<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>案例详情</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/home.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/share.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children">
				
				<div class="bg-w empty-guide">
					<img src="image/icon/empty-icon.png" />
					<h5 class="txt tc">暂未绑定导购</h5>
				</div>
				
				<div class="dm-title dm-mt bg-w"><span>推荐导购</span></div>
				
				<div class="guideMod top-line bottom-line bg-w">
					<ul class="flex-row list top-line" v-for="(item,index) in guideData" v-if="index<3" @click="location.href='guideDetail.html?guideId='+item.id">
						<li class="cover pt">
							<img :src="item.photo" />
						</li>
						<li class="flex-full info flex-col">
							<div class="namebox dm-clearfix">
								<h5 class="name dm-left">{{item.name}}</h5>
								<span class="help h6 dm-left">{{item.help}}</span>
							</div>
							<div class="store h6 dm-wrap">{{item.store}}</div>
						</li>
						<li class="btn flex-row">
							<input type="button" value="撩Ta" @click.stop='contact(item.id)' class="btn-2" />
							<input type="button" value="绑定" @click.stop='bind(item.id)' class="btn-1" />
						</li>
					</ul>
				</div>
				
			</div>
			
		</div>
	</div>
</div>


<script type="text/javascript">

//主模块
var vm = new Vue({
	el:'#Main',
	data:{
		guideData:testData.guider,
	},
	methods:{
		//绑定
		bind:function(id){
			dmAlert('确定要绑定该导购?',{
				cancel:'再考虑会',
				enter:'确认绑定',
				success:function(){
					tip('绑定成功')
				},
			})
		},
		//撩Ta
		contact:function(id){
			tip('你选择了要撩Ta');
		},
	},
	mounted:function(){
		pullSwiper('#Main');
	}
});

//底部按钮
var threeMod = new Vue({
	el:"#threeMod",
	methods:{
		//收藏
		collect:function(e){
			var target = e.currentTarget;
			if(target.className.indexOf('on') < 0){
				target.className = 'flex-full flex-row left-line on';
				target.children[1].innerHTML = '已收藏';
				tip('收藏成功');
			}else{
				target.className = 'flex-full flex-row left-line';
				target.children[1].innerHTML = '收藏';
				tip('取消成功');
			};
		},
		//赞
		help:function(e){
			var target = e.currentTarget;
			if(target.className.indexOf('on') < 0){
				target.className = 'flex-full flex-row left-line on';
				target.children[1].innerHTML ++;
				tip('已赞');
			}else{
				target.className = 'flex-full flex-row left-line';
				target.children[1].innerHTML --;
				tip('取消赞');
			};
		}
	}
});

</script>

</body>
</html>
